<template>
  <div class="project">
    <!-- 设备   -->
    <div class="wrapper">
      <div class="wb_header">
        <div>设备管理</div>
      </div>
      <div class="warp warp1">
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择省">
              <el-option label="湖南省" value="shanghai"></el-option> 
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择市">
              <!-- <el-option label="" value="shanghai"></el-option> 
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择区">
              <!-- <el-option label="" value="shanghai"></el-option> 
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择项目">
              <el-option label="常德省厅普适型检测项目" value="shanghai"></el-option> 
              <el-option label="常德普适型地灾检测(1170)" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择监测点">
              <el-option label="常德市石门县南北镇潘坪村雷家山滑坡" value="shanghai"></el-option> 
              <el-option label="常德澧县甘溪镇顺桥地灾隐患点" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input placeholder="设备编号" v-model="input1">
              <template slot="prepend"> 
                  <el-select v-model="queryFrom.region" class="input_inner_selct">
                    <el-option label="设备编号" value="shanghai"></el-option> 
                    <el-option label="所属产品" value="beijing"></el-option>
                  </el-select>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label=""> 
            <el-input placeholder="设备编号" suffix-icon="el-icon-search" v-model="queryFrom.input"> </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择设备状态">
              <el-option :label="item.label" :value="item.value" v-for="item in devTypeList" :key="item.value"></el-option>  
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择设备类型">
              <el-option label="普适型品类" value="27"></el-option> 
              <el-option label="综合型品类" value="28"></el-option>
              <el-option label="检测辅助设备" value="26"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
        <div class="tableBtn">
          <button class="divBtn"><img class="plus" src="@/assets/images/导出.svg" />导出设备</button>
          <button class="divBtn"><img class="plus" src="@/assets/images/加.svg" />添加设备</button>
          <button class="divBtn"><img class="plus" src="@/assets/images/批量添加.svg" />批量添加</button>
          <button class="divBtn"><img class="plus" src="@/assets/images/批量添加.svg" />批量更新设备别名</button>
          <button class="divBtn"><img class="plus" src="@/assets/images/批量更新.svg" />批量更新设备坐标</button>
        </div>
      </div> 
      <el-table v-loading="loading" :data="configList"> 
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="设备id" width="90" align="center" prop="id" />
        <el-table-column label="设备编号" align="center" prop="sn" :show-overflow-tooltip="true" />
        <el-table-column label="设备别名" align="center" prop="nameMask" :show-overflow-tooltip="true" />
        <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true" />
        <el-table-column label="监测点名称" align="center" prop="pointName" :show-overflow-tooltip="true" /> 
        <el-table-column label="所属产品" align="center" width="140" prop="productName" :show-overflow-tooltip="true" /> 
        <el-table-column label="启用/禁用" width="100" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.Enable" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
          </template>
        </el-table-column> 
        <el-table-column label="计算状态" width="100" align="center" prop="status" :show-overflow-tooltip="true" /> 
        <el-table-column label="连接状态" width="100" align="center" prop="status" :show-overflow-tooltip="true" /> 
        <el-table-column label="最后上线时间" align="center"  width="160" prop="lastOnlineTime" :show-overflow-tooltip="true" /> 
        <el-table-column label="操作" width="100"  align="center" class-name="small-padding fixed-width">
          <!-- <template slot-scope="scope"> -->
          <template> 
            <el-button size="mini" type="text">查看详情</el-button>  
          </template>
        </el-table-column>
      </el-table> 
      <div class="footer">
        <div>
          <el-button type="danger" plain>删除</el-button>
          <el-button type="primary" plain>配置阈值参数</el-button>
        </div>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    queryFrom: {},
    loading: false,
    configList: [
      { "id": 33192, "sn": "001B21031021_L3_YL_1", "Enable": 0, "nameMask": "普适型雨量001B21031021_L3_YL_1", "status":  "离线", "lastOnlineTime": "2024-02-01 09:00:34", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县理公港镇陈家界村大田垴组大田垴滑坡", "productName": "普适型-雨量", },
      { "id": 33374, "sn": "000C21030464_L4_LB_1", "Enable": 1, "nameMask": "普适型预警喇叭000C21030464_L4_LB_1", "status":  "在线", "lastOnlineTime": "2024-02-02 15:43:47", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县理公港镇陈家界村大田垴组大田垴滑坡", "productName": "普适型-预警喇叭", },
      { "id": 33382, "sn": "000C21030468_L4_LB_1", "Enable": 1, "nameMask": "普适型预警喇叭000C21030468_L4_LB_1", "status":  "在线", "lastOnlineTime": "2024-02-02 15:54:50", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县茶庵铺镇松阳坪木石溪组董家台滑坡群", "productName": "普适型-预警喇叭", },
      { "id": 33384, "sn": "000C21030469_L4_LB_1", "Enable": 1, "nameMask": "普适型预警喇叭000C21030469_L4_LB_1", "status":  "在线", "lastOnlineTime": "2024-02-02 15:29:40", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县杨溪桥镇冷家溪社区利华组不稳定斜坡", "productName": "普适型-预警喇叭", },
      { "id": 33418, "sn": "000C21030486_L4_LB_1", "Enable": 1, "nameMask": "普适型预警喇叭000C21030486_L4_LB_1", "status":  "在线", "lastOnlineTime": "2024-02-02 15:22:53", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县桃花源镇桃花源居委会后侧滑坡", "productName": "普适型-预警喇叭", },
      { "id": 33436, "sn": "000C21030495_L4_LB_1", "Enable": 1, "nameMask": "普适型预警喇叭000C21030495_L4_LB_1", "status":  "在线", "lastOnlineTime": "2024-02-02 15:29:38", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县桃花源镇桃花源居委会一组崩塌", "productName": "普适型-预警喇叭", },
      { "id": 33462, "sn": "000C21030509_L4_LB_1", "Enable": 1, "nameMask": "普适型预警喇叭000C21030509_L4_LB_1", "status":  "在线", "lastOnlineTime": "2024-02-02 15:55:51", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县桃花源镇印家铺村茶庄三组乡道东侧滑坡", "productName": "普适型-预警喇叭", },
      { "id": 33466, "sn": "000C21030511_L4_LB_1", "Enable": 1, "nameMask": "普适型预警喇叭000C21030511_L4_LB_1", "status":  "在线", "lastOnlineTime": "2024-02-02 15:44:39", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县桃花源镇印家铺朝阳村一组吕猛屋后滑坡", "productName": "普适型-预警喇叭", },
      { "id": 37706, "sn": "001C21020540_L1_LF_1", "Enable": 1, "nameMask": "普适型裂缝001C21020540_L1_LF_1", "status":  "在线", "lastOnlineTime": "2024-02-02 15:49:50", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县理公港镇陈家界村大田垴组大田垴滑坡", "productName": "普适型裂缝", },
      { "id": 37707, "sn": "001C21020540_L1_QJ_1", "Enable": 1, "nameMask": "普适型倾角001C21020540_L1_QJ_1", "status":  "在线", "lastOnlineTime": "2024-02-02 15:54:57", "projectName": "常德省厅普适型监测项目", "pointName": "桃源县理公港镇陈家界村大田垴组大田垴滑坡", "productName": "普适型-倾角", },      
    ],
    total: 10,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    },
    devTypeList:[
      {label: "未激活",value: 0},
      {label: "在线",value: 1},
      {label: "离线",value: 2},
      {label: "已禁用",value: 3},
      {label: "维护中",value: 5},
      {label: "维护结束",value: 6}
    ]
  }
},
methods:{
  getList(){}, 
}
}
</script>

<style scoped>
@import "~@/assets/styles/tablePage.scss";
.input_inner_selct{
  width: 100px;
}
</style>